font-family、font-size、font-weight
line-height）與字距（letter-spacing、word-spacing）text-align、text-indent）text-decoration 與 text-transform 增加變化<body>
<h1>CSS 字體與文字樣式</h1>
<p class="intro">這是一段介紹文字，展示了不同的字體設定與間距效果。</p>
<p class="emphasis">這段文字被特別強調，字體加粗且字距放大。</p>
<p class="decorated">這段文字有底線與大寫效果。</p>
</body>
</html>
body {
font-family: "Microsoft JhengHei", Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
h1 {
font-size: 32px;
text-align: center;
margin-bottom: 20px;
}
.intro {
font-size: 18px;
letter-spacing: 1px;
word-spacing: 4px;
text-indent: 2em;
}
.emphasis {
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
color: darkblue;
}
.decorated {
text-decoration: underline;
text-transform: uppercase;
color: crimson;
}
font-family 指定安全字體組合letter-spacing 與 word-spacing，觀察差異text-indent（首行縮排）text-align: center 與 right
今天專注在字體與文字樣式的學習，讓我更清楚文字本身就是設計的一部分。字體大小、粗細、行高，會直接影響文章的可讀性與觀感。以前只會單純放文字，現在知道要搭配適合的字體與間距，讓內容看起來更專業。
我特別喜歡 letter-spacing 與 word-spacing 的效果，小小的調整就能讓段落更有呼吸感。而 text-transform 則能快速改變大小寫，在標題或特別強調的地方很實用。
這讓我體會到設計並不是複雜的花樣，而是細節的累積。即便是一篇純文字內容，也能透過字體設定展現不同氛圍。
iThome鐵人賽
看影片追技術